<!-- 通过模板创建演练 -->
<template>
    <div class="teamConfig">
        <Card style="width:100%" v-for="item in groupList" :key="item.id" class="teamCard">
            <template #title>
                <div class="flex-between">
                    <h5>{{item.name}}</h5>   
                    <Button size="small" type="primary" @click="showAccessModal(item)">选择成员</Button>
                </div>
            </template>
            <p class="flex2" style="color:#f90">
                <!-- 需添加成员个数：<span v-if="item.userCount > 1">1~{{ item.userCount}}</span><span v-else>1</span>个， -->
                请至少添加1个成员,已添加成员个数：{{item.userList.length}}个</p>  
            <p>
                <Tag color="blue" v-for="user in item.userList" :key="user.userId">{{user.user.nickname}}</Tag>
            </p>
        </Card>
        <AccessUserModal v-model="accessUserModal.show" :group="accessUserModal.group" :allSelectedUsers="allSelectedUsers"></AccessUserModal>
    </div>
</template>
<script>
import AccessUserModal from './accessUserModal.vue'
export default {
    name:"teamConfig",
    components:{AccessUserModal},
    props:{
        groupList:{
            type:Array,
            default:() => []
        }
    },
    data(){
        return {
            accessUserModal:{
                show:false,
                loading:true,
                title:'接入/移除成员'
            },
        }
    },
    computed:{
        allSelectedUsers(){ //所有已选用户
            return this.groupList.reduce((res,current, index,arr) => {
                return [...res,...current.userList]
            },[])
        }
    },
    mounted(){
        
    },
    methods:{
        showAccessModal(group){
            this.accessUserModal.show = true;
            this.accessUserModal.group = group;
        }
    }
}
</script>
<style scoped>
.flex-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-end{
    display: flex;
    justify-content: flex-end;
}
.flex1{
    flex:1
}
.flex2{
    flex:2
}
.teamCard >>> .ivu-card-head{
    padding: 5px 16px;
}
</style>